<template>
    <div class="u-validate-field" :class="{'error':isError}">
        <div class="vali-left" :style="styles.valiLeft">
            <span>{{label}}</span>
            <span class="remarks-required" v-if="required=='required'">*</span>
            <span class="remarks-non-required" v-else>{{required}}</span>
        </div>
        <div class="vali-right" :style="styles.valiRight">
            <div>
                <slot></slot>
            </div>
        </div>
        <div class="vali-error" :style="styles.errorPanel">
            <div class="error">
                <slot name="error"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    import {addEvent,addClass,hasClass,removeClass} from 'utils';
    export default {
        name: "validateField",
        props:{
            label:{
                type:String,
                default:"",
            },
            prop:{
                type:null
            },
            regex:{
                type:null
            },
            required:{
                type:String,
                default: ''
            }
        },
        data(){
            return {
                valiParent:{},
                name:"validateField",
                styles:{
                    valiLeft:{
                        width:"100px",
                        height:"inherit"
                    },
                    valiRight:{
                        width:"100px"             
                    },
                    errorPanel:{
                        paddingLeft:"100px"
                    }
                },
                errorPanel:void 0,
                isError:false,
                //0:untouch,1:invalid,2:success
                status:0,
            }
        },
        watch:{
            prop(n){
                this.Validate(n)
                this.valiParent.TestfiyField()
            }
        },
        created(){
            var parent = this.$parent;
            while(parent.name!="validateGroup"){
                parent = parent.$parent;
                if(!parent){
                    break;
                }
            }
            this.valiParent = parent;
        },
        mounted(){
            //get errorPanel
            this.errorPanel = this.$el.querySelector(".vali-error");

            this.WidthSetter();
//            addEvent(window,"resize",this.WidthSetter);
//            if(this.valiParent.labelWidth!=0){
//                this.styles.valiLeft.height = this.$el.offsetHeight + "px";
//            }
            var control = this.$el.getElementsByTagName("input")[0];
            if(!control) control = this.$el.getElementsByTagName("textarea")[0];
            if(control){
                addEvent(this.$el,"click",e=>{
                    control.focus()
                })
            }
        },
        methods:{
            WidthSetter(){
                let label_w = parseInt(this.valiParent.labelWidth);
                this.styles.valiRight.width = this.valiParent.fieldWidth;
                this.styles.valiLeft.width = label_w + "px";
                this.styles.errorPanel.paddingLeft = label_w + "px";
            },
            //return pass invalid pending
            Validate(val=this.prop){
                let app = this.valiParent.root;
                app['$validate'] = this.valiParent.rules[this.regex]

                var isValid = app['$validate'](val,this);
                if(isValid=='pending') return
                if(this.required!='required'&&val=='') isValid = false;
                //验证不通过
                if(isValid){
                    //如果已经是不通过状态就跳过
                    return this.SetStatus('invalid');
                }
                else{
                    return this.SetStatus('pass');
                }
            },
            //单个组件校验，不改变任何状态返回false通过，true不通过
            Testfiy(val=this.prop){
                let app = this.valiParent.root;
                app = this.valiParent.rules[this.regex];
                return app.$validate(val)
            },
            SetStatus(status){
                if(status=='invalid'){
                    this.status = 1;
                    if(!this.isError){
                        this.errorPanel.style.height = "auto";
                        var sourceH = this.errorPanel.offsetHeight;
                        this.errorPanel.style.height = 0;
                        this.isError = true;
                        setTimeout(()=>{
                            this.errorPanel.style.height = sourceH + "px";
                        },1);
                    }
                    return true
                }else if(status=='pass'){
                    this.status = 2
                    if(this.isError){
                        this.errorPanel.style.height = 0;
                        setTimeout(()=>{
                            this.isError = false;
                        },300)
                    }
                    return false;
                }else{
                    this.status = 0;
                    this.errorPanel.style.height = 0;
                    this.isError = false;
                }

            },
            ScrollShake(){
                var pos = window.pageYOffset;
                var interval = setInterval(()=>{
                    pos = pos-6;
                    if(pos<=this.$el.offsetTop){
                        clearInterval(interval)
                        if(!hasClass(this.$el,"shake")){
                            addClass(this.$el,"shake")
                            setTimeout(()=>{
                                removeClass(this.$el,"shake")
                            },1100)
                        }

                    }
                    window.scrollTo(0,pos)
                },1)
            }
        }
    }
</script>